import React ,{ Component }from "react";

import ImagePicker from 'react-native-image-crop-picker';
import {Text, View, StatusBar, ScrollView, StyleSheet,Image} from "react-native";
import * as URL from '../../api/URL'
import {connect} from "react-redux";
import {Actions} from "react-native-router-flux";
import Swiper from 'react-native-swiper';
import * as BASE_ACTION from "../../actions/baseAction";
class HomePage extends Component{
    constructor(props){
        super(props);
        this.state = {
            language: '地区',
        }
    }

    componentDidMount(): void {
        let ws =new WebSocket(URL.websocketUrl);
        ws.onopen= () => {
            ws.send('something');// send a message
        };

        ws.onmessage= (e) => {

            this.props.__recieveMsg(e.data);
        };

        ws.onerror= (e) => {
            console.log("error ==>",e.message);
        };

        ws.onclose= (e) => {
            console.log("close ==>",e.code,e.reason);

        };
    }

    __openPicker() {
        ImagePicker.openPicker({
            width: 300,
            height: 400,
            cropping: true
        }).then(image => {
            console.log(image);
        });
    }
    render(){
        return(
            <ScrollView>
                <StatusBar backgroundColor={'transparent'} translucent={true} />



                <Swiper style={styles.wrapper} horizontal={true} autoplay={true}>
                    <View>
                        <Image source={require('../../res/img/b1.jpg')}/>
                        <Text>
                            banner 1
                        </Text>
                    </View>
                    <View>
                        <Image source={require('../../res/img/b2.jpg')}/>
                        <Text>
                            banner 2
                        </Text>
                    </View>
                </Swiper>


                <View style={{borderWidth:1,borderColor:'#999',padding:50,width: 300,fontSize:24}}>
                    <Text style={{fontSize:32}} onPress={Actions.OrderManager}>订单管理</Text>
                    <Text style={{fontSize:32}} onPress={Actions.CommodityManager}>商品管理</Text>
                    <Text style={{fontSize:32}} onPress={Actions.EvaluateManager}>评价管理</Text>
                    <Text style={{fontSize:32}} onPress={Actions.MyWallet}>我的钱包</Text>
                    <Text style={{fontSize:32}} onPress={Actions.ExtensionHelper}>推广宝</Text>
                    <Text style={{fontSize:32}} onPress={Actions.PerchaseHelper}>进货宝</Text>
                    <Text style={{fontSize:32}} onPress={Actions.LockHelper}>锁客宝</Text>
                    <Text style={{fontSize:32}} onPress={Actions.ManagementData}>经营数据</Text>
                </View>

                <View style={{justifyContent: 'center',alignItems: 'center',marginTop: 80}}>
                    <Text onPress={()=>{this.__openPicker()}}>拍照</Text>
                </View>

                <Text style={{fontSize: 24}} onPress={()=>{
                    this.props.__login("","");
                }}>首页</Text>

                <Text style={{fontSize: 24}} onPress={Actions._test}>测试页面</Text>

            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    linearGradient: {
        flex: 1,
        paddingLeft: 15,
        paddingRight: 15,
        borderRadius: 5
    },
    wrapper:{
      height: 200,
      width:800,
      borderColor: "#999",
      borderWidth: 1
    },
    buttonText: {
        fontSize: 18,
        fontFamily: 'Gill Sans',
        textAlign: 'center',
        margin: 10,
        color: '#ffffff',
        backgroundColor: 'transparent',
    },
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB'
    },

    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5'
    },

    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9'
    },

    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold'
    },
});

export default connect(
    (state) => {
        return {
        }
    },
    (dispatch) => ({
        __recieveMsg: (data) => dispatch(BASE_ACTION.recieveMsg(data)),
    })
)(HomePage)

